<template>
  <div class="list">
    <div class="list_main" v-for="(item, index) of arr" :key="index">
      <div class="cake_list">
        <div class="cake">
          <div class="image">
            <!-- ../../../wdm server/public/images/cake/md/new1.jpg -->
            <img :src="item.img_main" @click="goto(item.lid)" />
          </div>

          <div class="cake_info">
            <div class="cake_left">
              <div class="title">
                <router-link :to="`/details/${item.lid}`">{{ item.title }}</router-link>
              </div>
              <div class="intro">
                {{ item.introduce }}
              </div>
            </div>

            <div class="cake_right">
              <div class="price">
                <span class="fl money">￥</span>
                <span class="fl new">{{ item.price }}</span>

                <ul class="price_right fl">
                  <li>
                    <span class="fl">.00</span>
                    <span>
                      {{ item.spec }}{{ item.peizi }} {{ item.jiaxin }}</span
                    >
                  </li>
                </ul>
              </div>
              <div class="sub">
                <button class="btn" @click="buy(index)">立即购买</button>
                <button class="btn" @click="goto(item.lid)">查看详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <div class="page_count">
        总计：{{ arr.length }}&nbsp;&nbsp;|&nbsp;&nbsp;共1页
      </div>
    </div>
  


</div>
</template>

<script>
export default {
  props: ["arr"],
  // data(){
  //    return{
  //       cake:{}
  //    }
  // },
  methods: {
    goto(lid) {
      this.$router.push(`/details/${lid}`);
    },
    buy(index){
          
      let product = {
          lid:this.arr[index].lid,
          image:this.arr[index].img_sm,
          title:this.arr[index].title,
          spec:this.arr[index].spec,
          peizi:this.arr[index].peizi,
          jiaxin:this.arr[index].jiaxin,
          amount:1,
          price:this.arr[index].price
      }
      this.$store.commit("addItem", product);
      this.$router.push("/shopcar");
    }
  },
};
</script>

<style scoped>
.sub {
  width: 200px;
  height: 26px;
  position: absolute;
  bottom: 40px;
  right: 23px;
}

.money {
  font-size: 23px;
  margin-top: 26px;
}

.price_right li span:nth-child(1) {
  font-weight: bold;
}
.price_right {
  width: 160px;
  position: absolute;
  top: 75px;
  right: -36px;
  font-size: 16px;
  line-height: 17px;
}
.price .new {
  font-size: 49px;
  font-family: Helvetica;
  letter-spacing: -3px;
}

.price {
  width: 280px;
}

.fl {
  float: left;
}
.list {
  margin-top: 20px;
  width: 100%;
  height: auto;
  background: #fff;
}
.list_main {
  width: 1170px;
  height: auto;
  margin: 0 auto;
}
.list_main .route {
  font-size: 12px;
}
.list_main .classify {
  width: 1170px;
  height: 21px;
  margin: 10px 0 0 0;
  line-height: 21px;
}
.classify {
  font-size: 12px;
}

.classify_text {
  float: left;
}
.classify a {
  color: #757575;
}
.route a {
  color: #757575;
}
.classify ul li {
  float: left;
  margin: 0 10px;
  cursor: pointer;
}
.cake_list {
  width: 1170px;
  height: auto;
}
.cake {
  width: 1170px;
  height: 210px;
  padding: 20px 10px;
  border-bottom: 1px dashed #bcbcbc;
}
.cake_list img {
  width: 200px;
  height: 184px;
}
.cake_info {
  width: 940px;
  height: 200px;
  padding: 0 0 0 30px;
  float: left;
  position: relative;
}
.cake_left {
  width: 700px;
  height: 130px;
  float: left;
}
.cake_right {
  width: 210px;
  height: 130px;
  padding: 40px 15px;
  float: left;
  color: #e4004f;
  
}
.image {
  float: left;
  cursor: pointer;
}
.image img:hover {
  transform: scale(1.07);
}
.image img {
  transition: 0.4s ease;
}
.title a {
  font-size: 18px;
  color: #000;
}
.intro {
  padding: 3px 0;
}

.btn {
  width: 90px;
  height: 26px;
  margin: 0 5px;
  text-align: center;
  border: none;
  border-radius: 5px;
  background-color: #e4004f;
  color: #fff;
}
.page {
  height: 60px;
  margin: 30px 0 0 0;
}
.page_count {
  height: 12px;
  font-size: 12px;
  text-align: center;
  line-height: 12px;
}
</style>

